<template>
	<!-- 手机号登录只是完善信息，微信登录在本页面注册 -->
	<view class="container"  >
		<view class="logo_new">
			<image class="logo_image_new" src="@appstatic/user/user_icon_toplogo.png"></image>
		</view>
		<view style="padding-left: 40.5px; padding-top: 25.73px;padding-bottom: 27px;">
			<text style="font-weight: 300;font-size: 24px;line-height: 34px;">
				还差一步
			</text>
			<view style="padding-top: 7px;">
				<text style="line-height: 20px;font-size: 14px;font-weight: 300;color: #ADB0AE;">首次登录需要完善个人资料</text>
			</view>
		</view>
		<view class="content" >
			<!-- 注册表单 -->
			<view class="register-form">
				<view class="row">
					<image style="width: 14px;height: 14px;padding-left: 19px;padding-right: 11px;" src="@appstatic/user/user_icon_name.png" mode="aspectFit"></image>
					<!-- <text>姓名</text> -->
					<input class="register-form-input" :focus="true" :value="name" placeholder="姓名" @input="nameInput" placeholder-class="phcolor" maxlength="30">
					</input>
				</view>
				
				<view class="input_space_margin_top_40" style="margin-top: 24px; "></view>
				
				<view class="radio">
					<image style="width: 14px;height: 14px;padding-left: 19px;padding-right: 11px;" src="@appstatic/user/user_icon_mobile.png" mode="aspectFit"></image>
					<!-- <input class="register-form-input" :focus="false" :value="sex" placeholder="性别" @input="sexInput" placeholder-class="ph_msgcolor">
					</input> -->
					<!-- <text >性别</text> -->
					<radio-group name="" @change="sexInput">
						<label v-for="item in identity" :key="item" style="margin-right:20px">
							<radio :value="item" :checked="item==sex" color="#EA5404" style="transform:scale(0.7)" />{{item}}
						</label>
					</radio-group>
				</view>
				
				<view class="input_space_margin_top_40" style="margin-top: 24px; "></view>
				
				<view class="row" >
					<image style="width: 14px;height: 14px;padding-left: 19px;padding-right: 11px;" src="@appstatic/user/user_icon_mobile_register.png" mode="aspectFit"></image>
				
					<!-- <text style="width: 100rpx;">手机号</text> -->
					<text v-if="isweixin==0" style="padding-left: 20upx;">{{phone}}</text>
					<input  v-if="isweixin==1" type="number" maxlength="11" style="padding-left: 10px;width: 70%;" class="register-form-input" :focus="true" :value="phone" placeholder="手机号" @input="mobileInput" placeholder-class="phcolor">
					</input>
				</view>
				<!-- 微信注册需要发送验证码 -->
				<view v-if="isweixin==1" class="input_space_margin_top_40" style="margin-top: 24px; "></view>
				
				<view class="row" v-if="isweixin==1">
					<image style="width: 18px;height: 14.67px;padding-left: 19px;padding-right: 11px;"
						src="@appstatic/user/user_icon_code.png" mode="aspectFit">
					</image>
					<!-- <text >验证码</text> -->
					<input type="number" maxlength="6"  style="padding-left: 6px;" class="register-form-input" :focus="false"
						:value="verificationCode" placeholder="验证码" @input="verificationCodeInput"
						placeholder-class="ph_msgcolor">
					</input>
					<CountDownView id="countView" ref="countView" @countStartEvent="countStartEvent"
						@countEndEvent="countEndEvent" mode="newLogin"></CountDownView>
				</view>
				
				<view class="input_space_margin_top_40" style="margin-top: 24px; "></view>
				
				<view class="row" style="justify-content: space-between;" @click="toArea">
					<view class="">
						<image style="width: 14px;height: 14px;padding-left: 19px;padding-right: 11px;" src="@appstatic/user/user_icon_city.png" mode="aspectFit"></image>
						<text style="padding-left: 6px;width: 200rpx;">城市</text>
						<text style="padding-left: 10px;">{{area}}</text>
					</view>
					<view style="display: flex;align-items: center;">
						<image style="width: 9px;height: 18px;" src="@appstatic/user/user_icon_link.png" mode="aspectFit"></image>
					</view>
					
				</view>
			</view>
	
	
			<!-- 注册按钮 -->
			<view v-if="name!=='' && sex!=='' && area!==''" @click="complete" style="padding-left:20px;padding-right:20px">
				<button class="register-button" hover-class="btn-style-hover" plain="true">
					完成注册
				</button>
			</view>
			
			
			<view v-if="name=='' || sex=='' || area==''" style="padding-left:20px;padding-right:20px">
				<button class="register-button-uncomplete" hover-class="btn-style-hover" plain="true">
					完成注册
				</button>
			</view>
		</view>	
		
		
	</view>
</template>

<script>
	const app = getApp();
	const util = require("../../utils/util.js");
	const network = require("@manager/network-manager.js");
	const dialog = require("../../utils/dialog.js");
	import CountDownView from "@components/CountDownView/CountDownView.vue";
	import JSEncrypt from '@utils/jsencrypt';
	
	export default {
		components: {
			// vanCheckbox,
			CountDownView
		},
		data() {
			return {
				identity:['男','女'],
				phone:'',
				name:'',
				sex:'',
				area:'',
				from:'',
				isweixin:0,
				verificationCode:'',
				uuid:'',
				province:'',
				cityCode: '',
				provinceCode: ''
			};
		},
		onLoad: function(options) {
			var that = this;
			if (options && options.from) {
				this.from = options.from;
			}
			if (options && options.isweixin) {
				this.isweixin = options.isweixin;
				this.rasId = options.rasId;
				this.wxinfo = JSON.parse(options.wxinfo);
			}
			console.log("from:"+this.from,"isweixin:"+this.isweixin)
		},
		onShow:function(e) {
			if(this.isweixin == 1){
				this.getPublicKey();
			}else{
				this.userInfo=app.globalData.userInfo;
				this.phone = this.userInfo.phone;
			}
		},
		methods:{
			nameInput:function(e){
				this.name = e.detail.value
			},
			sexInput:function(e){
				this.sex=e.detail.value
			},
			mobileInput:function(e){
				this.phone=e.detail.value
			},
			cityInput:function(e){
				this.city=e.detail.value
			},
			toArea: function() {
				uni.navigateTo({
					url: "/module_my/pages/myArea/myArea",
				});
			},
			complete:function(){
				if(this.isweixin == 1){
					//微信登录后的注册
					this.weixinRegister();
				}else{
					//手机号登录后的完善信息
					this.completeInfo();
				}
			},
			//获取用户输入的验证码
			verificationCodeInput: function(e) {
			
				this.verificationCode = e.detail.value
			
			},
			//手机验证码 带手机号查重
			countStartEvent: function() {
				var that = this;
				console.log('===================')
				if (that.phone.length == 0) {
					dialog.toast("手机号不能为空");
					return;
				}
			
				if (that.phone.length != 11) {
					dialog.toast("手机号格式有误");
					return;
				} //计时
				that.$refs.countView.startCount();
				var uri = app.globalData.config.interfaces.URL_SYS_SENDSMS_DUPLE;
				var params = {
					"phone": that.phone
				};
				const header = {}; //
				network.post(uri, params, "form", header).then(res => {
					if (res.code == 200) {
						var result = res.data;
						that.code = result
			
					} else {
						that.$refs.countView.stopCount();
						that.phone = '';
						if (res.message) {
							dialog.toast(res.message);
						} else {
							dialog.toast('验证码发送失败');
						}
					}
				}).catch(res => {});
				console.log("countStartEvent");
			},
			countEndEvent: function() {
				console.log("countEndEvent");
			},
			getPublicKey: function(uuid) {
				this.uuid = (Math.random() * 1000) | 0;
			
				var that = this;
				var uri = app.globalData.config.interfaces.URL_COMMON_PUBLIC_KEY;
				var params = {
					"id": this.uuid
				};
				const header = {}; //
				network.get(uri, params, "form", header).then(res => {
			
					if (res.code == 200) {
						that.rasKey = res.data;
			
						that.encrypt(that.rasKey, "xxxx");
					}
				}).catch(res => {});
			},
			encrypt: function(key, msg) {
				const jsencrypt = new JSEncrypt()
				jsencrypt.setPublicKey(key)
				console.log("key"+key);
				console.log("msg"+msg);
				
				return jsencrypt.encrypt(msg)
			},
			weixinRegister:function(){
				var that=this;
				
				var loginType = "";
				if(app.globalData.systemPlatform=="WEIXIN"){
					loginType = "0"
				}else if (app.globalData.systemPlatform=="App"){
					loginType = "1"
				}
				
				var loginDevice = ""
				if(app.globalData.systemVersionNum.indexOf("Android") != -1){
					loginDevice = "0"
				}
				
				if(app.globalData.systemVersionNum.indexOf("iOS") != -1){
					loginDevice = "1"
				}
				
				
				
				var uri=app.globalData.config.interfaces.URL_SYS_WXLOGIN+"?rasId="+this.uuid;
				var params={
					"userName":that.name,
					"sex":that.sex,
					"city":that.area,
					"phone":that.phone,
					"code":this.verificationCode,
					"isfrom":4,
					"openid": this.encrypt(this.rasKey, this.wxinfo.openId),
					"unionId": this.encrypt(this.rasKey, this.wxinfo.unionId),
					
					"loginType": loginType,//登录来源(0 小程序 1 用户app 2 渠道端 3 pc)
					"loginDevice": loginDevice,//登录设备(0 Android 1 IOS)
					"loginVersion":uni.getStorageSync("version")
					
					
				};
				
			 
				 
				network.post(uri,params,"json").then(res=>{
					console.log(res);
					if(res.code==200){
						app.saveToken(res.data.token);
						app.saveUser(res.data);
						if(that.from.length>0){
							util.goBackSourcePage(this.from);
						}else{
							uni.switchTab({
								url: '/pages/community/community'
							})
						}
					}else{
						uni.showToast({
							title:res.message?res.message:'注册异常',
							duration: 3000,
							icon: 'none'
						})
					}
				})
			},
			completeInfo:function(){
				var that=this;
				var uri=app.globalData.config.interfaces.URL_ADMIN_UPDATEUSERINFO;
				var params={
					"id":app.globalData.userInfo.id,
					"userName":that.name,
					"sex":that.sex,
					"city":that.area,
					"province":that.province,
					"cityCode": this.cityCode,
					"provinceCode": this.provinceCode,
				};
				network.put(uri,params,"json").then(res=>{
					console.log(res);
					if(res.code==200){
						app.globalData.userInfo.userName=that.name;
						app.globalData.userInfo.sex=that.sex;
						app.globalData.userInfo.city=that.area;
						app.saveUser(app.globalData.userInfo);
						if(that.from.length>0){
							util.goBackSourcePage(this.from);
						}else{
							uni.switchTab({
								url: '/pages/community/community'
							})
						}
					}else{
						uni.showToast({
							title:res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style>
	.container {
		/* background: url("https://levcdmposs.oss-cn-hangzhou.aliyuncs.com/miniapp/images/news_head1.png") center no-repeat; */
		background: url("@appstatic/user/user_icon_bottomlogo.png") bottom right no-repeat;
		background-size: 323px,287px;
		width: 100vw;
		height: 100vh;
		/* height: calc(100vh - 44px); */
		/* display: flex;
		flex-direction: column; */
	}
	
	.content {
		/* padding: 51rpx; */
		/* padding-top: 80px; */
		/* padding-left: 24px;
		padding-right: 24px; */
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: calc(100vh - 314px);
	}
	.register-form{
		padding-left:20px;
		padding-right:20px;
	}
	.row {
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 1px solid #ECEDEE;
		height: 42px;
		/* width: 327px; */
		margin: auto;
		font-size: 16px;
		font-weight: 400;
		line-height: 22.4px;
		color: #ADB0AE
	}
	.radio {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 42px;
		/* width: 327px; */
		margin: auto;
		font-size: 16px;
		font-weight: 400;
		line-height: 22.4px;
		color: #ADB0AE
	}
	
	.logo_new {
		/* display: flex;
		justify-content: center;
		flex-direction: column; */
		
		/* top: 56px; */
		/* background: linear-gradient(180.02deg, #f7f8fa 0.01%, #ffffff 95.39%); */
	}
	
	.logo_image_new {
		width: 72px;
		height: 86.33px;
		margin-left: 40px;
		margin-top: 84px;
	}
	
	.register-form-input {
		font-size: 28rpx;
		color: #4F4F4F;
		height: 40rpx;
		line-height: 40rpx;
		padding-left: 20upx;
		width: 70%;
	}
	
	.shortinput {
		width: calc(100% - 20rpx - 173rpx)
	}
	
	.canvas {
		width: 85px;
		background-color: #f7faff;
	}
	
	.login-image {
		width: 100%;
		height: 420rpx;
	}
	
	.register-image>image {
		margin-left: calc((100% - 353rpx) / 2);
		margin-top: 85rpx;
		width: 353rpx;
		height: 238rpx;
	}
	
	.register-button {
		line-height: 80rpx;
		height: 42px;
		/* width: 335px; */
		margin: auto;
		border: none;
		border-radius: 2px;
		font-size: 16px;
		font-weight: 400;
		margin-top: 56px;
	}
	.register-button-uncomplete {
		line-height: 80rpx;
		height: 42px;
		/* width: 335px; */
		margin: auto;
		border: none;
		border-radius: 2px;
		font-size: 16px;
		font-weight: 400;
		margin-top: 56px;
	}
	.logo_mode {
		width: 40px;
		height: 40px;
		margin: 10px;
	}
	
	button.register-button[plain] {
		border: 0;
		background-color: #EA5404;
		color: #ffffff;
		/* font-weight: bold; */
		font-size: 16px;
		font-weight: 400;
	}
	
	button.register-button-uncomplete[plain]{
		border: 0;
		background-color: #EDEDED;
		color:#ADB0AE;
		/* font-weight: bold; */
		font-size: 16px;
		font-weight: 400;
	}
	
	.footOpration {
		border-bottom: 0px;
		height: 75rpx;
		margin-top: 0rpx;
		font-size: 26rpx;
		display: flex;
		justify-content: space-between;
	}
	
	.logo {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}
	
	.logo_image {
		height: 100rpx;
		width: 282rpx;
		margin-top: 152rpx;
	}
	
	.logo_welcome {
		color: #333333;
		font-size: 36rpx;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
	}
	
	.area_code {
		color: #333333;
		font-size: 28rpx;
		width: 20%;
	}
	
	.phcolor {
		color: #BDBDBD;
		font-size: 16px;
		font-weight: 400;
	}
	
	.ph_msgcolor {
		color: #BDBDBD;
		font-size: 16px;
		font-weight: 400;
	}
	
	.text {
		font-size: 10px;
	}
	
	.buttom-logo {
		height: 287px;
		width: 323px;
		left: 52px;
		
	}
</style>
